//hooks: 让一个功能的数据和方法摆在一起 —— 模块化封装
//hooks命名规范： use+功能 eg. useOrder, useDog
//hooks不仅能写方法，还能写生命周期的钩子函数
//我先用这个测试一下能不能上传到gitee

import { reactive, onMounted } from "vue";
import axios from "axios";

export default function () {
    let dogList = reactive([
        "https://images.dog.ceo/breeds/boxer/n02108089_1355.jpg",
        "https://images.dog.ceo/breeds/boxer/n02108089_2831.jpg",
    ]);

    async function comeOn() {
        try {
            let result = await axios.get(
                "https://dog.ceo/api/breed/boxer/images/random"
            );
            console.log(result.data);
            dogList.push(result.data.message); //向 dogList 中添加数据，push()方法可以往数据中添加数据
        } catch (error) {
            alert(error);
        }
    }

    //钩子
    onMounted(() => {
        comeOn()
    })

    return { dogList, comeOn }
}

